<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>收益管理</title>
  <!-- 引入 Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f8f9fa;
      padding: 20px;
    }

    .container {
      max-width: 960px;
      margin: auto;
    }

    .sidebar {
      margin-bottom: 20px;
    }

    table {
      background-color: #fff;
    }

    .table-striped tbody tr:nth-of-type(odd) {
      background-color: rgba(0, 0, 0, 0.05);
    }

    .btn-primary {
      background-color: #007bff;
      border-color: #007bff;
    }

    .btn-primary:hover {
      background-color: #0069d9;
      border-color: #0062cc;
    }

    .form-control:focus {
      box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
    }

    .success-message {
      color: #28a745;
    }

    .error-message {
      color: #dc3545;
    }
  </style>
  <script>
    function validateWithdrawForm(form) {
      var amountInput = form.amount;
      var amount = parseFloat(amountInput.value);
      var maxAmount = parseFloat(amountInput.max);

      if (isNaN(amount) || amount <= 0 || amount % 2 !== 0) {
        alert("请输入有效的提现金额（正数且为 2 的倍数）");
        return false;
      }

      if (amount > maxAmount) {
        alert("提现金额不能超过当前余额");
        return false;
      }

      return true;
    }
  </script>
</head>
<body>
<div class="container">
  <div class="sidebar">
    <ul class="nav nav-pills flex-column mb-4">
      <li class="nav-item">
        <a class="nav-link" th:href="@{/courier/main}">我的信息</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" th:href="@{/courier/pending-orders}">需配送订单</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" th:href="@{/courier/total-orders}">总配送订单</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" th:href="@{/courier/earnings_management}">收益管理</a>
      </li>
    </ul>
  </div>

  <h1 class="mb-4">收益管理</h1>

  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">统计信息</h5>
          <!-- 新增余额字段 -->
          <p class="card-text"><strong>当前余额：</strong><span th:text="${balance} ?: 0"></span> 元</p>
          <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#withdrawModal">提现</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 提现弹窗 Modal -->
  <div class="modal fade" id="withdrawModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">提现</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form th:action="@{/courier/withdraw}" method="post" onsubmit="return validateWithdrawForm(this)">
          <div class="modal-body">
            <div class="mb-3">
              <label for="amount" class="form-label">提现金额：</label>
              <input type="number"
                     id="amount"
                     name="amount"
                     th:attr="min=${2}, max=${balance ?: 0}"
                     step="2"
                     required
                     class="form-control" />
              <div class="form-text" id="amountHelp" th:text="'最大可提现：' + (${balance} ?: 0) + ' 元'"></div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            <button type="submit" class="btn btn-primary">确认提现</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 显示操作结果 -->
  <p th:if="${success}" class="success-message" th:text="${success}"></p>
  <p th:if="${error}" class="error-message" th:text="${error}"></p>

  <!-- 引入 Bootstrap JS 和依赖 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</div>
</body>
</html>
